@media screen and (max-width: 1229px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .header .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 50px;
    }

    .menu {
        order: 3;
        grid-column: 1 / 3;
    }

    .header-logo {
        justify-self: end;
    }
}

@media screen and (max-width: 799px) {
    .burger {
        display: block;
        color: #bbb;
        font-size: 28px;
    }

    .header .container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        max-width: 230px;
    }

    .menu {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .main .container {
        grid-template-columns: 1fr;
    }

    .main-image {
        grid-column: unset;
        grid-row: unset;
        order: 2;
        margin-bottom: 41px;
    }

    .main h1 {
        order: 1;
    }

    .main-info-text {
        order: 3;
    }

    .main-info-description {
        order: 4;
    }

    .main-actions {
        order: 5;
    }
}